<template>
	<view class="box"> 
	  <view style="width: 90%;margin: 0 auto;font-size: 28rpx;color: #333;font-weight: 500;">
		<view style="display: flex;justify-content: center;align-items: center;height: 100rpx;border-bottom: 1rpx solid #aaa;">
			<view style="width: 160rpx;">姓名：</view>
			<input placeholder="请输入姓名"  style="width: 440rpx;" v-model="userinfo.readname"/>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;height: 100rpx;border-bottom: 1rpx solid #aaa;">
			<view style="width: 160rpx;">身份证号：</view>
			<input type="idcard" placeholder="请输入身份证号" style="width: 440rpx;" v-model="userinfo.cardid"/>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;height: 100rpx;border-bottom: 1rpx solid #aaa;">
			<view style="width: 160rpx;">手机号：</view>
			<input  type="number" placeholder="请输入手机号"  style="width: 440rpx;" v-model="userinfo.phone"/>
		</view>
		<view style="display: flex;justify-content: center;align-items: center;height: 100rpx;border-bottom: 1rpx solid #aaa;">
			<view style="width: 170rpx;">支付宝账号：</view>
			<input placeholder="请输入支付宝账号"  style="width: 440rpx;" v-model="userinfo.zybao"/>
		</view>
		<view style="margin: 20rpx 0;color: red;">提示：请全部填写完!</view>
		<button @click="btn" style="background-color: #f45e5d;color: #fff;border-radius: 40rpx;border: none;position: relative;top: 800rpx;">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{
					readname:'',
					cardid:'',
					phone:'',
					zybao:''
				},
				show:0
				
			}
		},
		onLoad() {
			this.getsave()
		},
		methods: {
			async getsave(){
				const {data:res} = await this.$http.post('/nav/getsave',{})
				if(res.errCode==200 && res.data.readname){
					this.userinfo=res.data
				}
			},
			 btn(){
				if(!this.userinfo.readname){
					uni.showToast({
						icon:'error',
						title:'请填写姓名'
					})
					return
				}
				if(!this.userinfo.cardid){
					uni.showToast({
						icon:'error',
						title:'请填写身份证'
					})
					return
				}
				if(!this.userinfo.phone){
					uni.showToast({
						icon:'error',
						title:'请填写手机号'
					})
					return
				}
				if(!this.userinfo.zybao){
					uni.showToast({
						icon:'error',
						title:'请填写支付宝账号'
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认保存修改吗？',
					success: async (res)=> {
						if (res.confirm) {
							if(this.userinfo._id){
								const {data:res} = await this.$http.post('/nav/updatesave',this.userinfo)
								if(res.errCode==200){
									uni.showToast({
										title:'保存成功',
										success: () => {
											setTimeout(()=>{
											  uni.navigateBack()
											},500)
										}
									})
								}
							}else{
								const {data:res} = await this.$http.post('/nav/save',this.userinfo)
								if(res.errCode==200){
									uni.showToast({
										title:'保存成功',
										success: () => {
											setTimeout(()=>{
											  uni.navigateBack()
											},500)
										}
									})
								}
							}
							
							
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	button::after {
		border: none;//去除边框
	}
 .box{
	 width: 100vw;
	 height: 100vh;
	 background-color: #fff;
 }
</style>
